<!--
 * @Author: HeAo
 * @Date: 2021-12-22 16:33:02
 * @LastEditTime: 2022-01-06 21:27:36
 * @LastEditors: Chips
 * @Description: 
 * @FilePath: \bruip-id-11group-teamwork\am-ui\src\pages\am\order\Repairs.vue
 * 别乱动！
-->
<template>
  <div>
    <el-page-header @back="$router.go(-1)" content="报修"></el-page-header>
    <div class="orderContent">
      <br /><br />
      <el-form :model="form" :rules="rules">
        <el-form-item label="报修设备" label-width="120px" prop="casValue">
          <el-cascader
            v-model="casValue"
            :options="edTree"
            @change="casHandleChange"
            :cols="12"
            :props="props"
            clearable
            style="width: 40%"
            placeholder="请选择保修设备"
          ></el-cascader>
        </el-form-item>
        <el-form-item prop="bill_why" label="问题描述" label-width="120px">
          <el-input
            type="textarea"
            v-model="form.bill_why"
            :rows="13"
            style="height: 290px; width: 40%"
            placeholder="请输入报修问题"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传图片" label-width="120px" prop="images">
          <el-upload
            class="upload-demo"
            action="http://121.199.29.84:8001/file/upload"
            :on-success="imgHandlePreview"
            :on-remove="imgHandleRemove"
            :on-exceed="imgOverLimitHandler"
            :file-list="fileList"
            list-type="picture"
            :limit="3"
          >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-picture-outline"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <!-- {{ fileList }}
          {{ form }} -->
        </el-form-item>
        <div class="button"></div>
        <el-button
          type="primary"
          @click="toCommitHandler"
          style="position: fixed; right: 50px; bottom: 50px"
          >提交</el-button
        >
      </el-form>
    </div>
  </div>
</template>
<script>
import { get, postJSON } from "@/utils/request.js";
export default {
  data() {
    return {
      casValue: [],
      edTree: [],
      form: {
        engineer_id: [],
        device_id: [],
      },
      order: {},
      props: {
        value: "id",
        label: "name",
      },
      rules: {
        casValue: [
          {
            required: true,
            message: "请输入报修设备",
            trigger: "blur",
          },
        ],
        bill_why: [
          {
            required: true,
            message: "请输入报修问题",
            trigger: "blur",
          },
        ],
        images: [{ required: true }],
      },
      fileList: [],
    };
  },
  methods: {
    //查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
      });
    },
    casHandleChange(val) {
      // 判断拿到的数组是否为空
      console.log(val);
      if (val) {
        //分别拿到engineer_id 和device_id
        this.form.engineer_id = val[0];
        this.form.device_id = val[1];
        // console.log(engineer_id);
        // console.log(device_id);
      }
    },
    //图片上传成功的回调
    imgHandlePreview(res) {
      let img = {
        name: res.data.fileName,
        url: "http://121.199.29.84:8888/group1/" + res.data.id,
      };
      // console.log(res.data.fileName);
      this.fileList.push(img);
    },
    // 图片删除后的回调
    imgHandleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 提交按钮点击事件
    toCommitHandler() {
      //判断是否已上传三张图片
      if (this.fileList.length == 3) {
        //将图片列表中的url遍历到form中对应字段中（p1,p2,p3）
        for (let i = 1; i < 4; i++) {
          this.form["p" + i] = this.fileList[i - 1].url;
        }
        //提交
        postJSON("/workorder/repairOrder", this.form).then((res) => {
          // 提示成功
          this.$message.success("提交成功");
          // 跳转到list
          this.$router.push({
            path: "list",
          });
        });
      } else {
        this.$message.warning("请上传三张图片");
      }
    },
    // 图片上传超出上限的会调
    imgOverLimitHandler() {
      this.$$message.warning("请上传三张图片");
    },
  },
  created() {
    this.findEngineerDeviceTree();
    this.order = this.$route.query;
  },
};
</script>
<style scoped>
.orderContent {
  margin-top: 60px;
}
</style>